<template>
	<view class="goodsList">
		<view class="head-wrap">
			<head-section></head-section>
			<view class="order-by-List">
				<view class="target" 
					v-for="(target,index) in orderbyList" 
					@tap="orderGoods(index)" 
					:key="index" 
					:class="[target.id == sortBy?'on':'']"
				>
					{{target.text}} 
					<view class="iconfont" 
						v-if="target.orderbyicon" 
						:class="orderBy == 1?'icon-iconsort':'icon-iconasc'"
					></view>
				</view>
			</view> 
		</view>
		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="noGoods" v-if="goodsList.length == 0">
				<image src="../../static/images/noorder.png"></image>
				<view class="text">暂无商品</view>
			</view>
			<view class="list">
				<view class="item" 
					v-for="(goods) in goodsList" 
					:key="goods.id" 
					@tap="toGoods(goods)"
				>
					<image mode="widthFix" :src="goods.img"></image>
					<view class="name">{{goods.name}}</view>
					<view class="info">
						<view class="price">￥{{goods.price}}</view>
						<view class="slogan">{{goods.slogan}}人付款</view>
					</view>
				</view>
			</view>
			<view class="loading-text">{{loadingText}}</view>
		 </view>
	</view>
</template>

<script>
  import { mapState } from 'vuex';
	import headSection from '../../components/headSection.vue'
	import { links } from '../../common/mixins.js';

	export default {
		name: 'goodsList',
		components: {
			headSection,
		},
		mixins: [ links ],
		data() {
			return {
        upPullAddLoading: false,
        listFinished: false,
				currentPage: 0,
				pageSize: 10,
				reachBottom: false,
				loadingText: "",
				goodsList: [],
				orderbyList: [
					{id: 'multiple', text: "综合", orderbyicon: false},
					{id: 'sale', text: "销量", orderbyicon: false},
					{id: 'price', text: "价格", orderbyicon: true},
				],
				sortBy: 'multiple',
				orderBy: "1"
			};
		},
		computed: {
			...mapState ([
				'debugSetting' // 将 this.debugSetting 映射为 this.$store.state.debugSetting
			])
		},
		onLoad() { 
			//console.log(this.$Route); // 打印出上个页面传递的参数。
			uni.setNavigationBarTitle({ // 设置标题
				title: this.$Route.query.name
			});
			this.loadList(); // 加载商品列表
		},
		onPullDownRefresh() { //下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
			this.loadList() // 刷新加载商品列表
		},
		onReachBottom() { // 上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
			if(this.listFinished){
				this.loadingText = "到底了";
				return false;
			}else{
				this.loadingText = "正在加载...";
				this.loadList('add');// 添加商品到现有商品列表
			}
		},
		methods: {
      loadList (val) { // 加载商品列表
        this.upPullAddLoading = true;
        if(val && val == 'add'){
          this.currentPage++;
        }else{
					this.listFinished = false;
          this.currentPage = 1;
          this.goodsList = [];
					this.loadingText = '';
        }
        let reqParams = {
					sortBy: this.sortBy,
					orderBy: this.orderBy,
				  pageSize: this.pageSize,
				  requestPage: this.currentPage
        };
        this.$api.goods.getGoodsList( reqParams, (res) => {
					let list = res.data.map((item) => {
						let {
							id: id,
							img: img,
							name: name,
							price: price,
							slogan: slogan,
							...rest
						} = item;
						img = this.debugSetting.resourcePath + img;
						return { id, img, name, price, slogan, rest};
					});
          this.upPullAddLoading = false;
          uni.stopPullDownRefresh(); 
          if (this.pageSize >= list.length) {
            this.goodsList = this.goodsList.concat(list);
          }else{
            console.log('服务器返回数据超过每页显示数量：' + this.pageSize + '条');
          }
          if(this.pageSize > list.length) this.listFinished = true;
          else this.listFinished = false;
        });
      },
			toGoods(e) { // 商品跳转
				this.pushPage('/pages/goods/GoodsDetail', {id: e.id});
			},
			orderGoods(index) {//排序类型
				this.$UIplugins.scrollTo({scrollTop: 0});
				if(this.orderbyList[index].id == this.sortBy &&
					this.orderbyList[index].id != 'price') 
					return;
				let tmpTis = this.orderbyList[index].text + "排序 ";
				if(this.orderbyList[index].orderbyicon){
					if(this.orderBy == '1'){
						this.orderBy = '0';
						tmpTis += '升序'; 
					}else if(this.orderBy == '0'){
						this.orderBy = '1';
						tmpTis += '降序'; 
					}
				}else{
					this.orderBy = 1;
					tmpTis += '降序';
				}
				this.sortBy = this.orderbyList[index].id;
				this.$UIplugins.message({message: tmpTis});
				this.loadList(); // 加载商品列表
			}
		}
	}
</script>

<style>
	@import '../../static/iconfont.css';
</style>
<style lang="scss">
	.goodsList{
		.head-wrap{
			position: fixed;
			top: 0;
			// #ifdef H5
			top: 80upx;
			// #endif
			z-index: 10;
			width: 100%;
			.order-by-List{
				width: 92%;
				padding: 0 4%;
				height: 74upx;
				display: flex;
				justify-content: space-around;
				align-items: flex-end;
				background-color: #fff;
				border-bottom: solid 1upx #eee;
				.target{
					width: 20%;
					height: 70upx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28upx;
					margin-bottom: -2upx;
					color: #aaa;
					&.on{
						color: #555;
						border-bottom: 4upx solid #f06c7a;
						font-weight: 600;
						font-size: 30upx;
					}
				}
			}
		}
		.goods-list{
			margin-top: 210upx;
			.noGoods{
				width: 100%;
				height: 50vw;
				display: flex;
				justify-content: center;
				align-content: center;
				flex-wrap: wrap;
				image{
					width: 20vw;
					height: 20vw;
					border-radius: 100%;
				}
				.text{
					width: 100%;
					height: 60upx;
					font-size: 28upx;
					color: #444;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			.list{
				width: 92%;
				padding: 0 4% 3vw 4%; 
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.item{
					width: 48%;
					border-radius: 6upx;
					background-color: #fff;
					margin: 0 0 25upx 0;
					box-shadow: 0upx 5upx 25upx rgba(0,0,0,0.1);
					image{
						width: 100%;
						border-radius: 6upx 6upx 0 0;
					}
					.name{
						width: 92%;
						padding: 0 4%;
						margin:10upx 0;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						text-align: justify;
						overflow: hidden; 
						line-height: 1.4;
						font-size: 28upx;
						min-height: 72upx;   
					}
					.info{
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						width: 92%;
						padding: 10upx 4% 10upx 4%;
						
						.price{
							color: #e65339;
							font-size: 26upx;
							font-weight: 600;
						}
						.slogan{
							color: #807c87;
							font-size: 22upx;
						}
					}
				}
			}
			.loading-text{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 60upx;
				color: #979797;
				font-size: 24upx;
			}
		}
	}
</style>
